<template>
    <el-row class="allotorderrule">
        <el-col :span="24" class="content-header">分单规则配置</el-col>
        <el-card class="box">
            <el-form :inline="true" :model="queryForm" :label-position="labelPosition" label-width="150px">
                <el-form-item label="分单规则名称：">
                    <el-input v-model="queryForm.category" placeholder="分单规则名称"></el-input>
                </el-form-item>
                <el-form-item label="分单规则状态：">
                    <el-select v-model="queryForm.status" placeholder="分单规则状态">
                        <el-option label="未启用" value="0"></el-option>
                        <el-option label="已启用" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="query">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
            <el-row>
                <el-col :span="24">
                    <span>
                        <el-button type="primary" size="small" @click="add"><i class="fa fa-plus fa-lg right-5"></i>新增</el-button>
                    </span>
                    <span>
                        <el-button type="danger" size="small" @click="del"><i class="fa fa-close fa-lg right-5"></i>删除</el-button>
                    </span>
                    <el-table :data="dataInfo" tooltip-effect="dark" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="40">
                        </el-table-column>
                        <el-table-column label="操作" width="205">
                            <template slot-scope="scope">
                                <span>
                                    <el-tooltip effect="dark" content="修改" placement="bottom">
                                        <el-button type="success" size="small" @click="edit(scope.row.id)" icon="fa fa-edit fa-lg">
                                        </el-button>
                                    </el-tooltip>
                                </span>
                                <span>
                                    <el-tooltip effect="dark" content="查看" placement="bottom">
                                        <el-button type="warning" size="small" @click="show(scope.row.id)" icon="fa fa-eye fa-lg">
                                        </el-button>
                                    </el-tooltip>
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="分单规则名称" width="160">
                        </el-table-column>
                        <el-table-column prop="startDate" label="开始时间" width="160">
                        </el-table-column>
                        <el-table-column prop="endDate" label="结束时间" width="160">
                        </el-table-column>
                        <el-table-column prop="createUser" label="创建人">
                        </el-table-column>
                        <el-table-column prop="createDate" label="创建时间" width="160">
                        </el-table-column>
                        <el-table-column prop="status" label="状态" width="80">
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="24" class="pagination">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40, 50]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="listTotal" :current-page="currentPage">
                    </el-pagination>
                </el-col>
            </el-row>
        </el-card>
    </el-row>
</template>
<script>
import './allotorderrule.scss';
import router from '@/router/index';

export default {
    data() {
        return {
            goPage : this.global.goPage,
            labelPosition : this.global.labelPosition,
            queryForm : {
                category : "",
                status : ""
            },
            dataInfo : [{
                id : "1",
                name : "分单规则1",
                startDate : "2017-01-01 10:00",
                endDate : "2017-01-31 10:00",
                createUser : "张三",
                createDate : "2017-01-01 10:10",
                status : "未启用"
            },{
                id : "2",
                name : "分单规则2",
                startDate : "2017-01-01 10:00",
                endDate : "2017-01-31 10:00",
                createUser : "张三",
                createDate : "2017-01-01 10:10",
                status : "未启用"
            },{
                id : "3",
                name : "分单规则3",
                startDate : "2017-01-01 10:00",
                endDate : "2017-01-31 10:00",
                createUser : "张三",
                createDate : "2017-01-01 10:10",
                status : "未启用"
            }],
            currentPage : 1,
            listTotal : 3,
            multipleSelection : [],
        }
    },
    methods: {
        query : function(){
            
        },
        resetForm : function(){

        },
        handleSelectionChange : function(val){
            this.multipleSelection = [];
            let length = val.length;
            for(let i = 0; i < length; i ++ ){
                let item = val[i];
                let _id = item.id;
                this.multipleSelection.push(_id);
            }
        },
        handleSizeChange : function(){

        },
        handleCurrentChange : function(){

        },
        add : function(){
            this.goPage(this.$router, 'allotorderruleadd');
        },
        del : function(){
            console.info(this.multipleSelection);
        },
        edit : function(id){
            this.goPage(this.$router, 'allotorderruleedit', {id : id});
        },
        show : function(id){
            this.goPage(this.$router, 'allotorderruledetail', {id : id});
        }
    },
    watch: {

    },
    mounted: function() {

    },
    created: function() {
    },
    beforeDestroy: function() {

    }
}
</script>